<template>
  <el-form ref="form"
    :model="form"
    :rules="creatRules"
    label-width="130px"
    style="height:450px;overflow-y:auto;">
    <el-form-item label="应用标识"
      prop="appCode">
      <el-input v-model="form.appCode"
        :disabled="sendApiCode !== ''? true : false"></el-input>
    </el-form-item>
    <el-form-item label="服务标识"
      prop="apiCode">
      <el-input v-model="form.apiCode"
        :disabled="sendApiCode !== ''? true : false"></el-input>
    </el-form-item>
    <el-form-item label="API名称"
      prop="apiName">
      <el-input v-model="form.apiName"></el-input>
    </el-form-item>
    <el-form-item label="IP和端口(多个用','隔开)"
      prop="ipPort">
      <el-input type="textarea"
        v-model="form.ipPort"></el-input>
    </el-form-item>
    <el-form-item label="API描述"
      prop="apiDescribe">
      <el-input type="textarea"
        v-model="form.apiDescribe"></el-input>
    </el-form-item>
    <el-form-item label="路由类型"
      prop="routeType">
      <el-select v-model="form.routeType"
        placeholder="请选择路由类型">
        <el-option label="API"
          value="1"></el-option>
        <el-option label="WEB"
          value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="鉴权服务">
      <el-checkbox-group v-model="authenticationList">
        <el-checkbox label="1"
          :key="1">需要实名信息</el-checkbox>
        <el-checkbox label="2"
          :key="2">需要登陆信息</el-checkbox>
        <el-checkbox label="3"
          :key="3">需要人脸识别</el-checkbox>
        <el-checkbox label="4"
          :key="4">需要微信支付密码验证</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="原始请求URI"
      prop="originalUri">
      <el-input v-model="form.originalUri"></el-input>
    </el-form-item>
    <el-form-item label="转发真实URI"
      prop="originalUri">
      <el-input v-model="form.forwardUri"></el-input>
    </el-form-item>
    <el-form-item label="API协议"
      prop="apiProtocol">
      <el-select v-model="form.apiProtocol"
        placeholder="请选择API协议">
        <el-option label="http"
          value="http"></el-option>
        <el-option label="https"
          value="https"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="访问范围"
      prop="ranges">
      <el-select v-model="form.ranges"
        placeholder="请选择访问范围">
        <el-option label="公开"
          value="1"></el-option>
        <el-option label="私有"
          value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"
        v-if="sendApiCode !== ''"
        @click="modify('form')">修改路由</el-button>
      <el-button type="primary"
        v-else
        @click="addNew('form')">创建路由</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getServiceDetails, modifyService, creatService } from "@/api/allApi"; // 引入相应API
export default {
  data() {
    return {
      form: {
        appCode: "",
        apiCode: "",
        apiName: "",
        apiDescribe: "",
        routeType: "",
        ipPort: "",
        originalUri: "",
        forwardUri: "",
        apiProtocol: "",
        ranges: ""
      },
      authenticationList: [],
      creatRules: {
        appCode: [
          { required: true, message: "请输入应用标识", trigger: "blur" }
        ],
        apiCode: [
          { required: true, message: "请输入服务标识", trigger: "blur" }
        ],
        apiName: [
          { required: true, message: "请输入服务名称", trigger: "blur" }
        ],
        ipPort: [
          { required: true, message: "请输入IP和端口", trigger: "blur" }
        ],
        apiDescribe: [
          { required: true, message: "请输入服务描述", trigger: "blur" }
        ],
        routeType: [
          { required: true, message: "请选择路由类型", trigger: "change" }
        ],
        originalUri: [
          { required: true, message: "请输入原始请求URI", trigger: "blur" }
        ],
        forwardUri: [
          { required: true, message: "请输入转发真实URI", trigger: "blur" }
        ],
        apiProtocol: [
          { required: true, message: "请选择API协议", trigger: "change" }
        ],
        ranges: [
          { required: true, message: "请选择访问范围", trigger: "change" }
        ]
      }
    };
  },
  props: {
    sendApiCode: ""
  },
  methods: {
    addNew(form) {
      console.log(this.authenticationList);
      let params = {
        apiRoute: this.form,
        appCode: this.form.appCode,
        authenticationList: this.authenticationList
      };
      this.$refs[form].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          creatService(params).then(res => {
            if (res.data.code === "0") {
              this.$msgbox({
                title: "提示",
                message: "创建成功！",
                callback: () => {
                  location.reload();
                }
              });
              this.$refs[form].resetFields();
            } else {
              this.$message.error(res.data.desc);
            }
          });
          loading.close();
        } else {
          this.$message.error("请输入完整信息");
        }
      });
    },
    modify(form) {
      let params = {
        apiRoute: this.form,
        appCode: this.form.appCode,
        authenticationList: this.authenticationList
      };
      console.log(params);
      this.$refs[form].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          modifyService(params).then(res => {
            if (res.data.code === "0") {
              this.$refs[form].resetFields();
              this.$msgbox({
                title: "提示",
                message: "修改服务成功！",
                callback: () => {
                  location.reload();
                }
              });
            } else {
              this.$message.error(res.data.desc);
            }
          });
          loading.close();
        } else {
          this.$message.error("请输入完整信息");
        }
      });
    },
    getThisService() {
      this.listLoading = true;
      // for (let key in this.form) {
      //   this.form[key] = "";
      // }
      if (this.sendApiCode) {
        let param = {
          apiCode: this.sendApiCode
        };
        getServiceDetails(param).then(res => {
          if (res.data.code === "0") {
            let allJson = res.data.desc.apiRoute;
            this.form = allJson;
            this.form.appCode = res.data.desc.appCode;
            this.authenticationList = res.data.desc.authenticationList;
            this.form.routeType = String(this.form.routeType);
            this.form.ranges = String(this.form.ranges);
          } else {
            this.$message({
              message: `[${res.data.desc}]:查询失败`,
              type: "error"
            });
          }
          this.listLoading = false;
        });
      }
    }
  },
  mounted() {
    this.getThisService();
  },
  watch: {
    sendApiCode() {
      this.getThisService();
    }
  }
};
</script>
